import { TinyColor } from '@ctrl/tinycolor'
import { Button, ConfigProvider } from 'antd'

const colors3 = ['#3B74FB', '#6468F7', '#9659F2']
const getHoverColors = (colors: string[]) => colors.map(color => new TinyColor(color).lighten(5).toString())
const getActiveColors = (colors: string[]) => colors.map(color => new TinyColor(color).darken(5).toString())

const App = (props: any) => (
  <ConfigProvider
    theme={{
      components: {
        Button: {
          colorPrimary: `linear-gradient(116deg,  ${colors3.join(', ')})`,
          colorPrimaryHover: `linear-gradient(116deg, ${getHoverColors(colors3).join(', ')})`,
          colorPrimaryActive: `linear-gradient(116deg, ${getActiveColors(colors3).join(', ')})`
          // lineWidth: 0,
        }
      }
    }}
  >
    <Button shape="round" type="primary" {...props}>
      {props.children}
    </Button>
  </ConfigProvider>
)

export default App
